<template>
	<div>
		<h2>订单列表</h2>
		<div class="order-container">
			<div v-for="order in orders" :key="order.id" @click="viewOrderDetail(order.id)" class="order-card">
				<div class="order-header">
					<span class="order-id">#{{ order.id }}</span>
					<h3 class="order-title">{{ order.name }}</h3>
				</div>
				<div class="order-details">
					<p class="amount">总金额：¥{{ order.totalAmount }}</p>
					<div class="customer-info">
						<span class="customer-name">{{ order.customerName }}</span>
						<span class="customer-phone">{{ order.phoneNumber }}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	import { useRouter } from 'vue-router'

	const router = useRouter()

	const orders = ref([{
			id: 1,
			name: '订单A',
			totalAmount: 299,
			customerName: '张三',
			phoneNumber: '138-1234-5678',
			items: [
				{ name: '商品A', price: 99, quantity: 2 },
				{ name: '商品B', price: 199, quantity: 1 }
			]
		},
		{
			id: 2,
			name: '订单B',
			totalAmount: 450,
			customerName: '李四',
			phoneNumber: '139-8765-4321',
			items: [
				{ name: '商品C', price: 150, quantity: 3 }
			]
		},
		{
			id: 3,
			name: '订单C',
			totalAmount: 680,
			customerName: '王五',
			phoneNumber: '137-5555-8888',
			items: [
				{ name: '商品D', price: 340, quantity: 2 }
			]
		},
		// 其他订单保留原有结构并添加items字段
		{ id: 4, name: '订单D', totalAmount: 150, customerName: '赵六', phoneNumber: '136-1111-2222', items: [] },
		{ id: 5, name: '订单E', totalAmount: 899, customerName: '陈七', phoneNumber: '135-3333-4444', items: [] },
		{ id: 6, name: '订单F', totalAmount: 250, customerName: '周八', phoneNumber: '134-6666-7777', items: [] },
		{ id: 7, name: '订单G', totalAmount: 750, customerName: '吴九', phoneNumber: '133-8888-9999', items: [] },
		{ id: 8, name: '订单H', totalAmount: 420, customerName: '郑十', phoneNumber: '132-0000-1111', items: [] },
		{ id: 9, name: '订单I', totalAmount: 950, customerName: '孙十一', phoneNumber: '131-2222-3333', items: [] },
		{ id: 10, name: '订单J', totalAmount: 350, customerName: '杨十二', phoneNumber: '130-4444-5555', items: [] }
	])

	const viewOrderDetail = (id) => {
		router.push({ name: 'OrderDetail', params: { id } })
	}
</script>

<style scoped>
	.order-container {
		display: grid;
		gap: 1rem;
		padding: 1rem;
	}

	.order-card {
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		padding: 1.5rem;
		cursor: pointer;
		transition: box-shadow 0.2s;
	}

	.order-card:hover {
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.order-header {
		display: flex;
		align-items: center;
		gap: 1rem;
		margin-bottom: 1rem;
	}

	.order-id {
		color: #666;
		font-size: 0.9em;
	}

	.order-title {
		margin: 0;
		font-size: 1.2em;
		color: #333;
	}

	.order-details {
		display: grid;
		gap: 0.5rem;
	}

	.amount {
		color: #42b983;
		font-weight: 500;
		margin: 0;
	}

	.customer-info {
		display: flex;
		gap: 1rem;
		color: #666;
		font-size: 0.9em;
	}

	.customer-phone::before {
		content: '·';
		margin: 0 0.5rem;
	}
</style>